<template>
  <div class="contioner">
    <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
      <a-form size="small" :model="query" layout="inline">
        <a-form-item label="年份" prop="beginDate">
          <a-year-picker
            v-model="query.beginDate"
            :style="{ width: '180px' }"
            placeholder="选择开始日期"
            class="bacClass"
          />
        </a-form-item>
        <CorporateSectorCascader
          :configCascader="configCascader"
          @changeCascader="changeCascader"
        />
      </a-form>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
        </a-space>
      </div>
    </div>
    <div class="my-divisders">
      <a-divider orientation="center">
        <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
        <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
      </a-divider>
    </div>

    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div
      :style="{
        height: '45%',
        width: '100%',
        padding: '10px',
        display: 'flex',
        justifyContent: 'space-between',
      }"
    >
      <div :style="{ height: '100%', width: '50%' }">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          style="height: 100%"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="tableDataList"
          :columnDefs="tc"
          :localeText="localeText1"
        >
        </AgGridVuesCopys>
      </div>
      <div :style="{ height: '100%', width: '50%' }">
        <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </div>
    <div
      :style="{
        height: '45%',
        width: '100%',
        padding: '10px',
        display: 'flex',
        justifyContent: 'space-between',
      }"
    >
      <div :style="{ height: '100%', width: '28%' }">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          style="height: 100%"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="tableDataList2"
          :columnDefs="tc2"
          :localeText="localeText1"
        >
        </AgGridVuesCopys>
      </div>
      <div :style="{ height: '100%', width: '72%' }">
        <div ref="myChart1" :style="{ width: '100%', height: '100%' }"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts'
  
  import { Message } from '@arco-design/web-vue'
  import { ref, reactive, onMounted, watch } from 'vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  // 引入element提示
  //引入封装post
  import { post } from '@/api/http'
  import { Search, EditPen } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)
  const emit = defineEmits(['takebiaoji'])
  const headerShow = ref<boolean>(true)

  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
  }

  interface Querin {
    beginDate: any
    planOrderCode: any
  }
  //getlist初始化接口参数
  let query = reactive<Querin>({
    beginDate: dayjs().format('YYYY'), //当天日期
    planOrderCode: '',
  })

  const tableDataList: any = ref([])
  const tableDataList2: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
  }

  const tc = [
    {
      headerName: '项目',
      field: 'project',
      width: 170,
    },
    {
      headerName: '1月',
      field: 'oneMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-01')
      },
    },
    {
      headerName: '2月',
      field: 'twoMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-02')
      },
    },
    {
      headerName: '3月',
      field: 'threeMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-03')
      },
    },
    {
      headerName: '4月',
      field: 'fourMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-04')
      },
    },
    {
      headerName: '5月',
      field: 'fiveMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-05')
      },
    },
    {
      headerName: '6月',
      field: 'sixMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-06')
      },
    },
    {
      headerName: '7月',
      field: 'sevenMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-07')
      },
    },
    {
      headerName: '8月',
      field: 'eightMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-08')
      },
    },
    {
      headerName: '9月',
      field: 'nineMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-09')
      },
    },
    {
      headerName: '10月',
      field: 'tenMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-10')
      },
    },
    {
      headerName: '11月',
      field: 'elevenMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-11')
      },
    },
    {
      headerName: '12月',
      field: 'twelveMonth',
      width: 120,
      onCellClicked: function (o: any) {
        gridClicks(Number(query.beginDate) + '-12')
      },
    },

    // {
    //     headerName: '日期',
    //     field: 'dateByMonth',
    //     width: 120
    // },
    // {
    //     headerName: '日产目标值（吨/天）',
    //     field: 'goalByDay',
    //     width: 150
    // },
    // {
    //     headerName: '日均产量（吨/天）',
    //     field: 'outputByDay',
    //     width: 150
    // },
    // {
    //     headerName: '月目标',
    //     field: 'goalByMonth',
    //     width: 150
    // },
    // {
    //     headerName: '累计总产量（吨）',
    //     field: 'outputByTotal',
    //     width: 150
    // },
  ]

  const tc2 = [
    {
      headerName: '日期',
      field: 'dateByDay',
      width: 110,
    },
    {
      headerName: '日产目标值（吨/天）',
      field: 'goalByDay',
      width: 160,
    },
    {
      headerName: '日产量（吨/天）',
      field: 'outputByDay',
      width: 150,
    },
  ]

  function selectJt() {
    if (!query.planOrderCode) {
      Message.warning('公司必填')
      return false
    }
    post({
      url: 'qms/report/companyOutputReport',
      data: {
        firmId: query.planOrderCode,
        year: Number(query.beginDate),
      },
    }).then((res: any) => {
      if (res.code == 200) {
        let ob = {}
        let ob1 = {}
        let ob2 = {}
        let ob3 = {}
        res.data.forEach((o: any, index: any) => {
          for (let key in o) {
            if (key == 'goalByDay') {
              ob['project'] = '日产目标值（吨/天）'
              if (index == 0) {
                ob['oneMonth'] = o['goalByDay']
              } else if (index == 1) {
                ob['twoMonth'] = o['goalByDay']
              } else if (index == 2) {
                ob['threeMonth'] = o['goalByDay']
              } else if (index == 3) {
                ob['fourMonth'] = o['goalByDay']
              } else if (index == 4) {
                ob['fiveMonth'] = o['goalByDay']
              } else if (index == 5) {
                ob['sixMonth'] = o['goalByDay']
              } else if (index == 6) {
                ob['sevenMonth'] = o['goalByDay']
              } else if (index == 7) {
                ob['eightMonth'] = o['goalByDay']
              } else if (index == 8) {
                ob['nineMonth'] = o['goalByDay']
              } else if (index == 9) {
                ob['tenMonth'] = o['goalByDay']
              } else if (index == 10) {
                ob['elevenMonth'] = o['goalByDay']
              } else if (index == 11) {
                ob['twelveMonth'] = o['goalByDay']
              }
            }
            if (key == 'outputByDay') {
              ob1['project'] = '日均产量（吨/天）'
              if (index == 0) {
                ob1['oneMonth'] = o['outputByDay']
              } else if (index == 1) {
                ob1['twoMonth'] = o['outputByDay']
              } else if (index == 2) {
                ob1['threeMonth'] = o['outputByDay']
              } else if (index == 3) {
                ob1['fourMonth'] = o['outputByDay']
              } else if (index == 4) {
                ob1['fiveMonth'] = o['outputByDay']
              } else if (index == 5) {
                ob1['sixMonth'] = o['outputByDay']
              } else if (index == 6) {
                ob1['sevenMonth'] = o['outputByDay']
              } else if (index == 7) {
                ob1['eightMonth'] = o['outputByDay']
              } else if (index == 8) {
                ob1['nineMonth'] = o['outputByDay']
              } else if (index == 9) {
                ob1['tenMonth'] = o['outputByDay']
              } else if (index == 10) {
                ob1['elevenMonth'] = o['outputByDay']
              } else if (index == 11) {
                ob1['twelveMonth'] = o['outputByDay']
              }
            }
            if (key == 'goalByMonth') {
              ob2['project'] = '月目标'
              if (index == 0) {
                ob2['oneMonth'] = o['goalByMonth']
              } else if (index == 1) {
                ob2['twoMonth'] = o['goalByMonth']
              } else if (index == 2) {
                ob2['threeMonth'] = o['goalByMonth']
              } else if (index == 3) {
                ob2['fourMonth'] = o['goalByMonth']
              } else if (index == 4) {
                ob2['fiveMonth'] = o['goalByMonth']
              } else if (index == 5) {
                ob2['sixMonth'] = o['goalByMonth']
              } else if (index == 6) {
                ob2['sevenMonth'] = o['goalByMonth']
              } else if (index == 7) {
                ob2['eightMonth'] = o['goalByMonth']
              } else if (index == 8) {
                ob2['nineMonth'] = o['goalByMonth']
              } else if (index == 9) {
                ob2['tenMonth'] = o['goalByMonth']
              } else if (index == 10) {
                ob2['elevenMonth'] = o['goalByMonth']
              } else if (index == 11) {
                ob2['twelveMonth'] = o['goalByMonth']
              }
            }
            if (key == 'outputByTotal') {
              ob3['project'] = '累计总产量（吨）'
              if (index == 0) {
                ob3['oneMonth'] = o['outputByTotal']
              } else if (index == 1) {
                ob3['twoMonth'] = o['outputByTotal']
              } else if (index == 2) {
                ob3['threeMonth'] = o['outputByTotal']
              } else if (index == 3) {
                ob3['fourMonth'] = o['outputByTotal']
              } else if (index == 4) {
                ob3['fiveMonth'] = o['outputByTotal']
              } else if (index == 5) {
                ob3['sixMonth'] = o['outputByTotal']
              } else if (index == 6) {
                ob3['sevenMonth'] = o['outputByTotal']
              } else if (index == 7) {
                ob3['eightMonth'] = o['outputByTotal']
              } else if (index == 8) {
                ob3['nineMonth'] = o['outputByTotal']
              } else if (index == 9) {
                ob3['tenMonth'] = o['outputByTotal']
              } else if (index == 10) {
                ob3['elevenMonth'] = o['outputByTotal']
              } else if (index == 11) {
                ob3['twelveMonth'] = o['outputByTotal']
              }
            }
          }
        })
        tableDataList.value = [ob, ob1, ob2, ob3]
        let list: any = []
        let list1: any = []
        let list2: any = []
        let list3: any = []
        for (let key in ob2) {
          if (key.indexOf('one') != -1) {
            list[0] = ob2[key]
          }
          if (key.indexOf('two') != -1) {
            list[1] = ob2[key]
          }
          if (key.indexOf('three') != -1) {
            list[2] = ob2[key]
          }
          if (key.indexOf('four') != -1) {
            list[3] = ob2[key]
          }
          if (key.indexOf('five') != -1) {
            list[4] = ob2[key]
          }
          if (key.indexOf('six') != -1) {
            list[5] = ob2[key]
          }
          if (key.indexOf('seven') != -1) {
            list[6] = ob2[key]
          }
          if (key.indexOf('eight') != -1) {
            list[7] = ob2[key]
          }
          if (key.indexOf('nine') != -1) {
            list[8] = ob2[key]
          }
          if (key.indexOf('ten') != -1) {
            list[9] = ob2[key]
          }
          if (key.indexOf('eleven') != -1) {
            list[10] = ob2[key]
          }
          if (key.indexOf('twelveMonth') != -1) {
            list[11] = ob2[key]
          }
        }
        for (let key in ob3) {
          if (key.indexOf('one') != -1) {
            list1[0] = ob3[key]
          }
          if (key.indexOf('two') != -1) {
            list1[1] = ob3[key]
          }
          if (key.indexOf('three') != -1) {
            list1[2] = ob3[key]
          }
          if (key.indexOf('four') != -1) {
            list1[3] = ob3[key]
          }
          if (key.indexOf('five') != -1) {
            list1[4] = ob3[key]
          }
          if (key.indexOf('six') != -1) {
            list1[5] = ob3[key]
          }
          if (key.indexOf('seven') != -1) {
            list1[6] = ob3[key]
          }
          if (key.indexOf('eight') != -1) {
            list1[7] = ob3[key]
          }
          if (key.indexOf('nine') != -1) {
            list1[8] = ob3[key]
          }
          if (key.indexOf('ten') != -1) {
            list1[9] = ob3[key]
          }
          if (key.indexOf('eleven') != -1) {
            list1[10] = ob3[key]
          }
          if (key.indexOf('twelveMonth') != -1) {
            list1[11] = ob3[key]
          }
        }
        for (let key in ob) {
          if (key.indexOf('one') != -1) {
            list2[0] = ob[key]
          }
          if (key.indexOf('two') != -1) {
            list2[1] = ob[key]
          }
          if (key.indexOf('three') != -1) {
            list2[2] = ob[key]
          }
          if (key.indexOf('four') != -1) {
            list2[3] = ob[key]
          }
          if (key.indexOf('five') != -1) {
            list2[4] = ob[key]
          }
          if (key.indexOf('six') != -1) {
            list2[5] = ob[key]
          }
          if (key.indexOf('seven') != -1) {
            list2[6] = ob[key]
          }
          if (key.indexOf('eight') != -1) {
            list2[7] = ob[key]
          }
          if (key.indexOf('nine') != -1) {
            list2[8] = ob[key]
          }
          if (key.indexOf('ten') != -1) {
            list2[9] = ob[key]
          }
          if (key.indexOf('eleven') != -1) {
            list2[10] = ob[key]
          }
          if (key.indexOf('twelveMonth') != -1) {
            list2[11] = ob[key]
          }
        }
        for (let key in ob1) {
          if (key.indexOf('one') != -1) {
            list3[0] = ob1[key]
          }
          if (key.indexOf('two') != -1) {
            list3[1] = ob1[key]
          }
          if (key.indexOf('three') != -1) {
            list3[2] = ob1[key]
          }
          if (key.indexOf('four') != -1) {
            list3[3] = ob1[key]
          }
          if (key.indexOf('five') != -1) {
            list3[4] = ob1[key]
          }
          if (key.indexOf('six') != -1) {
            list3[5] = ob1[key]
          }
          if (key.indexOf('seven') != -1) {
            list3[6] = ob1[key]
          }
          if (key.indexOf('eight') != -1) {
            list3[7] = ob1[key]
          }
          if (key.indexOf('nine') != -1) {
            list3[8] = ob1[key]
          }
          if (key.indexOf('ten') != -1) {
            list3[9] = ob1[key]
          }
          if (key.indexOf('eleven') != -1) {
            list3[10] = ob1[key]
          }
          if (key.indexOf('twelveMonth') != -1) {
            list3[11] = ob1[key]
          }
        }
        option.value.series[0].data = list
        option.value.series[1].data = list1
        option.value.series[2].data = list2
        option.value.series[3].data = list3

        const state = states()
        state.setOption(option.value)
      } else {
        Message.error(res.message)
      }
    })
  }

  const getList = () => {
    selectJt()
  }

  const gridClicks = (date: any) => {
    post({
      url: 'qms/report/companyOutputReportByDay',
      data: {
        firmId: query.planOrderCode,
        date: date,
      },
    }).then((res: any) => {
      if (res.code == 200) {
        tableDataList2.value = res.data
        let x = res.data.map((o: any) => {
          return o['dateByDay']
        })
        let goalByDay = res.data.map((o: any) => {
          return o['goalByDay']
        })
        let outputByDay = res.data.map((o: any) => {
          return o['outputByDay']
        })
        option1.value.xAxis.data = x
        option1.value.series[0].data = outputByDay
        option1.value.series[1].data = goalByDay
        const state = states1()
        state.setOption(option1.value)
      } else {
        Message.warning(res.message)
      }
    })
  }
  // const colors = [ '#a5a5a5','#ffc000', '#5b9bd5','#ed7d31'];
  const option: any = ref({
    title: {
      text: '织厂产量',
      /*textVerticalAlign:'center'*/
      top: '0',
      left: '0',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['月目标', '累计总产量(吨)', '日产目标值(吨/天)', '日均产量(吨/天)'],
      // top: '10%',
      right: '5%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    },
    yAxis: {
      type: 'value',
      splitNumber: 2,
      // axisLabel: {
      //     formatter: '{value} %'
      // }
    },
    series: [
      {
        name: '月目标',
        type: 'bar',
        // stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 120],
        barWidth: 50,
        label: { show: true, position: 'top', distance: 10 },
      },
      {
        name: '累计总产量(吨)',
        type: 'bar',
        // stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
        barWidth: 50,
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨' },
      },
      {
        name: '日产目标值(吨/天)',
        type: 'line',
        // stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨' },
      },
      {
        name: '日均产量(吨/天)',
        type: 'line',
        // stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨' },
      },
    ],
  })

  const option1: any = ref({
    title: {
      text: '织厂日产量',
      /*textVerticalAlign:'center'*/
      top: '0',
      left: '0',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['日产量(吨/天)', '日产目标值(吨/天)'],
      // top: '10%',
      right: '5%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value',
      splitNumber: 2,
      // axisLabel: {
      //     formatter: '{value} %'
      // }
    },
    series: [
      {
        name: '日产量(吨/天)',
        type: 'bar',
        // stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 120],
        barWidth: 20,
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨' },
      },

      {
        name: '日产目标值(吨/天)',
        type: 'line',
        // stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
        label: { show: true, position: 'top', distance: 10, formatter: '{c}吨' },
      },
    ],
  })
  const myChart: any = ref()
  const myChart1: any = ref()
  const states = () => {
    return echarts.init(myChart.value!)
  }
  const states1 = () => {
    return echarts.init(myChart1.value!)
  }
</script>
<style scoped lang="less">
  .contioner {
    height: 100%;
    background: #fff;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
